
import request from '../../utils/request'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    videoTagList: [],
    navId: '',
    videoList: [],
    vid: '',
    recordList: [], //播放记录，每条记录应该包含视频的id和播放的时间
    flag: false
  },
  // 获取视频标签列表
  async getVideoTagList() {
    const result = await request('/video/group/list')
    if (result.code === 200) {
      // console.log(result);
      this.setData({
        videoTagList: result.data.slice(0, 20),
        navId: result.data.slice(0, 20)[0].id
      })
    }
  },
  // 获取视频列表
  async getVideoList() {
    const result = await request('/video/group', {
      id: this.data.navId
    })
    if (result.code === 200) {
      // console.log(result);
      this.setData({
        videoList: result.datas.map(item => item.data),
        flag: false
      })
    }
  },
  // 点击切换底部样式
  changeNav(event) {
    this.setData({
      navId: event.target.id * 1
    })
    this.getVideoList()
  },
  // 页面应该只有一个播放器，也就是只有一个视频在播放
  // 视频播放还是暂停
  playOrpause(event) {
    // 保存点击视频的id
    // 保存这个id是为了将这个id绑定到当前的页面身上，为判断再次点击的是否是同一个视频提供判断依据
    this.setData({
      vid: event.currentTarget.id
    })
    // 判断是不是第一次点击视频
    if (!this.player) {
      // 如果进来就代表是第一此点击这个视频，需要创建一个播放器并且播放视频
      this.player = wx.createVideoContext(this.data.vid)
      // 播放视频
      this.player.play()
      // 存储当前视频的id，为后面判断是否点击的是同一个视频通过判断依据
      this.vid = this.data.vid
      // 创建一个变量来标识
      this.isPlay = true
    } else {
      // 如果不是第一次点击视频，我们应该判断再次点击的是否为同一个视频
      if (this.vid === this.data.vid) {
        // 进来代表点击的是同一个视频
        // 就需要判断点击的视频的播放状态
        if (this.isPlay) {
          // 代表为播放状态
          this.player.pause()
          this.isPlay = false
        } else {
          // 为暂停状态
          this.player.play()
          this.isPlay = true
        }
      } else {
        // 如果点击的不是同一个视频
        // 需要先关闭上一个视频
        this.player.stop()
        // 判断播放记录里面是否有这条记录
        let obj = this.data.recordList.find(item => item.id === this.data.vid)
        // 再创建一个新的播放器去覆盖原来的播放器
        this.player = wx.createVideoContext(this.data.vid)
        // 设置好新的播放器之后，再一次播放视频，保存视频id，保存视频播放状态
        // 如果有这条记录则继续播放
        obj && this.player.seek()
        this.player.play()
        this.vid = this.data.vid
        this.isPlay = true
      }
    }
  },
  // 获取视频的播放记录
  getRecordList(event) {
    // console.log(event.detail);
    // 先判断播放记录中是否有这条视频，如果有这覆盖，没有则添加
    let recordList = this.data.recordList
    // 先判断播放记录中是否有这条视频，如果有这覆盖，没有则添加
    // 通过播放记录数组判断是否有这条记录
    let obj = recordList.find(item => item.vid === this.data.vid)
    if (obj) {
      obj.currentTime = event.detail.currentTime
    } else {
      recordList.push({
        vid: this.data.vid,
        currentTime: event.detail.currentTime
      })
    }
    this.setData({
      recordList
    })
  },
  // 在播放记录中删除已播放完成的
  removeOverVideo() {
    let recordList = this.data.recordList
    let index = recordList.findIndex(item => item.vid === this.data.vid)
    index !== -1 && recordList.splice(index, 1)
    this.setData({
      recordList
    })
  },
  // 下拉刷新
  handlerRefresherrefresh() {
    this.setData({
      flag: true
    })
    // 重新发请求拿数据
    this.getVideoList()
  },
  // 下拉触底反弹
  handlerScrolltolower() {
    let videoList = this.data.videoList
    let newArr = videoList.concat(videoList)
    if (newArr.length <= 40) {
      this.setData({
        videoList: newArr
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    // 保存第一次的id可以用来请求视频列表和设置每一列下面的红杠
    await this.getVideoTagList()
    // 发请求拿视频列表，必须在用户登录之后才能执行，所以必须判断用户是否登录
    // 如果存在用户信息 用户昵称 保存的Id 才能发请求
    let userInfo = wx.getStorageSync('userInfo_key')
    userInfo && userInfo.nickname && this.data.navId && this.getVideoList()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  // 所有的分享都要调用这个函数，才能分享
  onShareAppMessage: function ({
    from
  }) {
    if (from === 'button') {
      return {
        title: '这是按钮分享的',
        path: '/pages/video/video',
        imgUrl:'../../static/images/mylove.jpg'
      }
    }else{
      return {
        title: '这是系统分享的',
        path: '/pages/video/video',
        imgUrl:'../../static/images/mylove.jpg'
      }
    }
  }
})